A basic example of Pie charts in tooltips

This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip HTML code (specified like regular tooltips), and then it uses the ontooltip event to run some code whhich then creates the Pie chart in the tooltip.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.pie.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="1000" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        /**
        * This creates the Bar chart
        */
        var bar = new RGraph.Bar({
            id: 'myBar',
            data: [12,13,16,15],
            options: {
                textAccessible: true,
                gutterLeft: 35,
                colors: ['red'],
                title: 'A basic graph with charts in tooltips',
                labels: ['Kev', 'Brian', 'Fred', 'John']
            }
        })




        // A function which returns the string which is used as every tooltip
        if (!RGraph.ISOLD) {
            window.__mybar__ = bar;
            bar.set('tooltips', function (idx) {return '<div style="text-align: center"><h3 style="margin: 0">' + window.__mybar__.get('labels')[idx] + '\'s statistics:</h3><canvas id="__tooltip__canvas__" width="100" height="100">[No canvas support]</canvas></div>';});
        } else {
            alert("[RGRAPH] Sorry, your browser doesn't support tooltips");
        }

        bar.draw();


        /**
        * This is the function which ceates the Pie chart (using the custom ontooltip RGraph event
        */
        function myCreatePieChart(obj)
        {
            var canvas  = obj.canvas;
            var context = obj.context;
            var id      = obj.id;
            
            // This gets the tooltip index from the tooltip (which is stored in the RGraph registry) itself
            var idx = RGraph.Registry.Get('chart.tooltip').__index__;
            
            /**
            * The Pie chart data. Realistically this would come from a dynamic source,
            * eg AJAX
            */
            var pieData = [
                [4,5,3,6],
                [8,4,5,2],
                [4,3,5,1],
                [4,2,1,3]
            ];
            
            var pie = new RGraph.Pie({
                id: '__tooltip__canvas__',
                data: pieData[idx],
                options: {
                    align: 'left',
                    gutterTop: 10,
                    gutterBottom: 10,
                    gutterLeft: 10,
                    gutterRight: 10,
                    exploded: [3,3,3,3],
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw()
        }

        RGraph.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart);
    };
</script>